<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
    需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

    自定义指令总结：
      一、定义语法：
        （1）局部指令：
              new Vue({
                directive:{指令名:配置对象}
              })
              或
              new Vue({
                directive:{指令名:回调函数}
              })
        （2）全局指令：
              Vue.directive(指令名,配置对象)
              或
              Vue.directive(指令名,回调函数)
      二、配置对象中常用的3个回调：
        （1）bind：指令与元素成功绑定时调用
        （2）inserted：指令所在元素被插入页面时调用
        （3）update：指令所在模版结构被重新解析时调用
      三、备注：
        （1）指令定义式不加v-，但使用时要加v-
        （2）指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
-->

<div id="root">
  <h2>当前的n值是：<span v-text="n"></span></h2>
  <h2>放大十倍的n值是：<span v-big-number="n"></span></h2>
  <button @click="n++">点我n+1</button>
  <hr/>
  v-bind: <input type="text" v-bind:value="n"><br/>
  v-fbind:<input type="text" v-fbind:value="n">
</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false
  // 定义全局指令
  Vue.directive('fbind', {
    bind(element, binding) {
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element, binding) {
      element.focus()
    },
    // 指令所在模版被重新解析时
    update(element, binding) {
      element.value = binding.value
    }
  })

  const vm = new Vue({
    el: '#root',
    data: {
      n: 1
    },
    directives: {
      /*
      big-number函数何时会被调用？
        1.指令与元素成功绑定时（一上来）
        2.指令所在的模版被重新解析时
      */
      'big-number': function (element, binding) {
        console.log(element, binding)
        element.innerText = binding.value * 10
      },
      //    局部
      /*   fbind:{
           // 指令与元素成功绑定时（一上来）
           bind(element,binding){
             element.value=binding.value
           },
           // 指令所在元素被插入页面时
           inserted(element,binding){
             element.focus()
           },
           // 指令所在模版被重新解析时
           update(element,binding){
             element.value=binding.value
           }
         }*/

    },
    watch: {},
    computed: {},
    methods: {},
  })
</script>
</html>